<template>
    <div>
        <!--        文章信息展示-->
        <div class="newArticle">
            <div class="newArticleInfor" v-for="item in collectedArticleList" :key="item"
                 style="border-bottom-color: #cccccc">


                <!--            文章标题-->
                <div class="headOfNewArticle" style="flex: 1">
                    <div style="font-size: 18px;color: #222226;padding: 5px 20px" @click="$router.push('/mother/articleDetail?id='+item.id)">
                        {{item.name}}
                    </div>
                </div>
                <!--            文章简介-->
                <div style="flex: 1;font-size: 14px;color: #555666;padding: 5px 25px">
                    {{item.summary}}
                </div>
                <!--            其他-->
                <div style="flex: 2;padding: 5px 20px;font-size: 14px;color: #555666">
                    <sapn>发布时间：</sapn> {{item.time}}
                </div>
            </div>

        </div>
      <div style="padding: 10px 0">
        <el-pagination
            style="background-color: #ffffff"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[7,10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
    import request from "@/router/request";

    export default {
        name: "PersonalCollectView",
        data(){
            return{
                collectedArticleList:[],
                id:this.$route.query.id,
                user:sessionStorage.getItem("user1") ? JSON.parse(sessionStorage.getItem("user1")) : {},
                total:0,
                pageNum:1,
                pageSize:7,
            }
        },
        created() {
            this.loadArticleList()
        },
        methods:{
            loadArticleList(){
              console.log("asdasdasdadasdasd:::"+this.id);
                request.get("/article/selectCollectionArticle/"+this.id).then(res=>{
                    this.collectedArticleList = res.data
                })
            },


        }
    }
</script>

<style scoped>
    .newArticle{

        width: 100%;

    }
    .newArticleInfor{
        display: flex;
        flex-direction: column;
        margin-top: 1px;
        background-color: #ffffff;
    }
    .headOfNewArticle{
        cursor: pointer;
    }
    .newArticleInfor:hover{
        background-color: #F5F6F7;
    }
</style>
